import { defineComponent, ref, onMounted } from "vue";
import DataCard from "../../components/DataCard";
import RealtimeLineChart from "../../components/RealtimeLineChart";
import Bar3DChart from "../../components/Bar3DChart";
import DynamicGauge from "../../components/DynamicGauge";
import MapVisualization from "../../components/MapVisualization";
import ParticleBackground from "../../components/ParticleBackground";
import CircleProgress from "../../components/CircleProgress";
import { statsData } from "../../utils/mockData";
import "./index.css";

export default defineComponent({
  name: "Dashboard",
  components: {
    DataCard,
    RealtimeLineChart,
    Bar3DChart,
    DynamicGauge,
    MapVisualization,
    ParticleBackground,
    CircleProgress,
  },
  setup() {
    const totalVisits = ref(0);
    const totalUsers = ref(0);
    const totalRevenue = ref(0);
    const conversionRate = ref(0);
    const currentTime = ref(new Date().toLocaleString("zh-CN"));

    // 初始化数据
    onMounted(() => {
      totalVisits.value = statsData.getTotalVisits();
      totalUsers.value = statsData.getTotalUsers();
      totalRevenue.value = statsData.getTotalRevenue();
      conversionRate.value = statsData.getConversionRate();

      // 更新时间
      setInterval(() => {
        currentTime.value = new Date().toLocaleString("zh-CN");
      }, 1000);

      // 定时更新统计数据
      setInterval(() => {
        totalVisits.value = statsData.getTotalVisits();
        totalUsers.value = statsData.getTotalUsers();
        totalRevenue.value = statsData.getTotalRevenue();
        conversionRate.value = statsData.getConversionRate();
      }, 10000);
    });

    return () => (
      <div class="dashboard">
        {/* 粒子背景 */}
        <ParticleBackground />

        {/* 背景装饰 */}
        <div class="dashboard__bg">
          <div class="dashboard__bg-grid"></div>
          <div class="dashboard__bg-glow dashboard__bg-glow--1"></div>
          <div class="dashboard__bg-glow dashboard__bg-glow--2"></div>
          <div class="dashboard__bg-glow dashboard__bg-glow--3"></div>
        </div>

        {/* 头部 */}
        <header class="dashboard__header">
          <div class="dashboard__header-decoration dashboard__header-decoration--left"></div>
          <h1 class="dashboard__title">实时数据可视化大屏</h1>
          <div class="dashboard__header-decoration dashboard__header-decoration--right"></div>
          <div class="dashboard__time">{currentTime.value}</div>
        </header>

        {/* 主体内容 */}
        <div class="dashboard__content">
          {/* 顶部数据卡片 */}
          <div class="dashboard__section dashboard__section--top">
            <div class="dashboard__card-grid">
              <DataCard
                title="总访问量"
                value={totalVisits.value.toLocaleString()}
                icon="👁️"
                trend="up"
                trendValue="+12.5%"
                color="#00d4ff"
              />
              <DataCard
                title="总用户数"
                value={totalUsers.value.toLocaleString()}
                icon="👥"
                trend="up"
                trendValue="+8.3%"
                color="#00ff88"
              />
              <DataCard
                title="总收入"
                value={totalRevenue.value.toLocaleString()}
                unit="¥"
                icon="💰"
                trend="up"
                trendValue="+15.7%"
                color="#ffd700"
              />
              <DataCard
                title="转化率"
                value={conversionRate.value}
                unit="%"
                icon="📈"
                trend="down"
                trendValue="-2.1%"
                color="#ff4444"
              />
            </div>
          </div>

          {/* 中部图表区域 */}
          <div class="dashboard__section dashboard__section--middle">
            <div class="dashboard__chart-row">
              <div class="dashboard__chart-box dashboard__chart-box--large">
                <RealtimeLineChart title="实时数据趋势" />
              </div>
              <div class="dashboard__chart-box dashboard__chart-box--medium">
                <Bar3DChart title="区域销售数据" />
              </div>
            </div>
          </div>

          {/* 底部区域 */}
          <div class="dashboard__section dashboard__section--bottom">
            <div class="dashboard__chart-row">
              <div class="dashboard__chart-box dashboard__chart-box--medium">
                <MapVisualization title="全国数据分布" />
              </div>
              <div class="dashboard__progress-grid">
                <CircleProgress
                  title="任务完成度"
                  value={85}
                  color={["#00d4ff", "#0066ff"]}
                />
                <CircleProgress
                  title="目标达成率"
                  value={92}
                  color={["#00ff88", "#00cc66"]}
                />
              </div>
              <div class="dashboard__gauge-grid">
                <div class="dashboard__chart-box dashboard__chart-box--gauge">
                  <DynamicGauge title="CPU使用率" color="#00d4ff" />
                </div>
                <div class="dashboard__chart-box dashboard__chart-box--gauge">
                  <DynamicGauge title="内存使用率" color="#00ff88" />
                </div>
                <div class="dashboard__chart-box dashboard__chart-box--gauge">
                  <DynamicGauge title="磁盘使用率" color="#ffd700" />
                </div>
                <div class="dashboard__chart-box dashboard__chart-box--gauge">
                  <DynamicGauge title="网络负载" color="#ff4444" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  },
});
